<template>
  <div>
    <div class="public-header">
      <div class="container">
        <el-row class="logo-slogan">
          <el-col :span="12">
            <img class="logo header-logo" :src="logoUrl" alt="logo">
          </el-col>
          <el-col :span="12" class="my_text_right">
            <img class="slogan" :src="sologanUrl" alt="slogan">
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="public-nav">
      <HeaderTabs :headerTabs=parentHeaderTabs></HeaderTabs>
    </div>
    <div class="public-content">
      <div>
        <router-view></router-view>
      </div>
    </div>
    <div class="public-footer">
      <div class="footer-top">
        <div class="container">
          <el-row>
            <el-col :span="4">
              <img class="footer-slogan" :src="navigation" alt="页面底部slogan">
            </el-col>
            <el-col :span="5" v-for="(item,index) in footerDet" :key="index">
              <div class="top-text-title">
                <span>{{item.title}}</span>
              </div>
              <div class="top-text-line"></div>
              <div class="top-text-content">
                <ul>
                  <li v-for="(item,k) in item.lists" :data-url='item.href' :data-type='item.type' :data-id='item.id' @click="toFootpageFun($event,index,item.title)">{{item.title}}</li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer-bottom my_text_center">
        <p>{{copyRight}}</p>
      </div>
    </div>
    <!-- 右侧浮动窗口 -->
    <div class="right-box">
      <div class="group-box">
           <a href="#"><img :src="jiec" alt=""><p>防劫持</p></a>
      </div>
      <div class="group-box">
          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=40008888&site=qq&menu=yes"><img :src="qq" alt=""><p>客服</p></a>
      </div>
      <div class="group-box">
          <a href="#"><img :src="xiaoxi" alt=""><p>反馈</p></a>
      </div>
      <div class="group-box">
          <a href="#"><img :src="xiangshang" alt=""><p>顶部</p></a>
      </div>
    </div>
  </div>

</template>

<script>
import HeaderTabs from "./HeaderTabs";
import TabsHoverSection from "../components/TabsHoverSection";

import headerLogo from "../assets/imgs/layout/header-logo.png";
import slogan from "../assets/imgs/layout/slogan.png";
import footerLogo from "../assets/imgs/layout/footer-logo.png";

export default {
  components: {
    HeaderTabs,
    TabsHoverSection
  },
  data() {
    return {
      logoSloganTabsFooter: null,
      logoUrl: headerLogo,
      sologanUrl: slogan,
      parentHeaderTabs: [],
      footerDet: [],
      copyRight: "",
      isShowHoverBox: false,
      navigation: footerLogo,
      qq: require('../assets/imgs/layout/QQ (3).png'),
      jiec: require('../assets/imgs/layout/anquan.png'),
      xiangshang: require('../assets/imgs/layout/xiangshang.png'),
      xiaoxi: require('../assets/imgs/layout/xingxi.png')
    };
  },
  mounted() {
    this.axios
      .get("index/getObtainTopBottomNavigationList")
      .then(res => {
        if (res.data.status) {
          this.logoSloganTabsFooter = res.data.data;
          this.logoUrl = this.logoSloganTabsFooter.logo;
          this.navigation = this.logoSloganTabsFooter.navigation;
          this.sologanUrl = this.logoSloganTabsFooter.slogan;
          this.parentHeaderTabs = this.logoSloganTabsFooter.tabs;
          this.footerDet = this.logoSloganTabsFooter.footer;
          this.copyRight = this.logoSloganTabsFooter.copyright;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  methods: {
    toFootpageFun(e, clickIndex, title) {
      this.$store.commit("getLotteryType", "ssc");
      //底部跳转
      let type = e.target.getAttribute("data-type");
      let url = e.target.getAttribute("data-url");
      let id = e.target.getAttribute("data-id");
      if (type == 1) {
        // todo 根据id跳转站内
        switch (clickIndex) {
          case 0:
            this.$router.push(`/helpCenter/${id}`);
            break;
          case 1:
            this.$router.push({ path: "/downloadCenter", query: { type: id } });
            break;
          case 3:
            switch (title) {
              case "彩票大厅":
                this.$router.push("/lotterylobby/1");
                break;
              case "预测推荐":
                this.$router.push("/forecastrecommend/1");
                break;
              case "开奖直播":
                this.$router.push("/live/1");
                break;
              case "帮助中心":
                this.$router.push("/helpCenter/0");
                break;
              case "重庆时时彩":
                this.$router.push("/lotterylobby/1");
                break;
              case "加拿大28":
                this.$store.commit("getLotteryType", "l28");
                this.$router.push("/lotterylobby/13");
                break;
              default:
                break;
            }
            break;
          default:
            break;
        }
      } else {
        //根据url跳转站外
        window.open(url);
      }
    }
  }
};
</script>

<style lang="less">
@import url(../assets/css/public.less);
@import url(../assets/css/layout.less);
</style>


